<!doctype html>
<html class="default no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>GridLayout | GoJS API</title>
	<meta name="description" content="Documentation for GoJS API">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../../assets/css/style.css">
	<link rel="stylesheet" href="../assets/css/main.css">
	<script async src="../assets/js/search.js" id="search-script"></script>
</head>
<body>
<header>
	<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
		<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
			<div class="md:pl-4">
				<a class="text-white hover:text-white no-underline hover:no-underline
				font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html">
				<h1 class="mb-0 p-1 leading-none">GoJS</h1>
				</a>
			</div>
			<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
				<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
					<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
					<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
				</svg>
			</button>
			<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
				<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
					target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
					target="_blank"rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
				</ul>
			</div>
		</div>
		<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
	</nav>
	<div class="tsd tsd-page-header">
		<div class="tsd-page-toolbar">
			<div class="w-full max-w-screen-xl mx-auto px-2">
				<div class="table-wrap">
					<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
						<div class="field">
							<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
							<input id="tsd-search-field" type="text" />
						</div>
						<ul class="results">
							<li class="state loading">Preparing search index...</li>
							<li class="state failure">The search index is not available</li>
						</ul>
						<a href="../index.html" class="title">GoJS API</a>
					</div>
					<div class="table-cell" id="tsd-widgets">
						<div id="tsd-filter">
							<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
							<div class="tsd-filter-group">
								<div class="tsd-select" id="tsd-filter-visibility">
									<span class="tsd-select-label">All</span>
									<ul class="tsd-select-list">
										<li data-value="public">Public</li>
										<li data-value="protected">Public/Protected</li>
										<li data-value="private" class="selected">All</li>
									</ul>
								</div>
							</div>
						</div>
						<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
					</div>
				</div>
			</div>
		</div>
		<div class="tsd tsd-page-title">
			<div class="w-full max-w-screen-xl mx-auto px-2">
				<div class="top-copyright">
					<b>GoJS</b>&reg; Diagramming Components<br/>version 2.1.56<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
				</div>
				<div>
					<h1>Class GridLayout</h1>
				</div>
			</div>
		</div>
	</div>
</header>
<div class="tsd w-full max-w-screen-xl mx-auto pb-4">
	<div class="row px-2 w-full">
		<div class="col-8 col-content">
			<section class="tsd-panel tsd-hierarchy">
				<h3>Hierarchy</h3>
				<ul class="tsd-hierarchy">
					<li>
						<a href="Layout.html" class="tsd-signature-type" data-tsd-kind="Class">Layout</a>
						<ul class="tsd-hierarchy">
							<li>
								<span class="target">GridLayout</span>
							</li>
						</ul>
					</li>
				</ul>
			</section>
			<section class="tsd-panel tsd-comment">
				<div class="tsd-comment tsd-typography">
					<p>This simple layout places all of the Parts in a grid-like arrangement, ordered, spaced apart,
						and wrapping as needed.  It ignores any Links connecting the Nodes being laid out.
						There are many samples that use GridLayout.
					Every <a href="Palette.html">Palette</a> uses a GridLayout by default.</p>
					<p class="box">
						If you want to experiment interactively with most of the properties, try the <a href="../../samples/gLayout.html">Grid Layout</a> sample.
						See samples that make use of GridLayout in the <a href="../../samples/index.html#gridlayout">samples index</a>.
						<p>By default this layout will sort all of the Parts alphabetically
							(comparing <a href="Part.html#text">Part.text</a> values, respecting case)
							and position them left-to-right, separated by <a href="GridLayout.html#spacing">spacing</a><code>.width</code>,
							until they do not fit in the current row.
							At that time it starts a new row, separated from the previous row by <a href="GridLayout.html#spacing">spacing</a><code>.height</code>.
							There is a uniform cell size equal to the maximum Part width (plus spacing width)
							and the maximum part height (plus spacing height).
						At least one part is placed in each row, even if the part by itself is wider than the wrapping width.</p>
						<p>You can specify values for the <a href="GridLayout.html#cellSize">cellSize</a> <code>width</code> and <code>height</code>.
							If a part is wider than the cell size, it spans more than one cell in the row.
							You can also specify a value for the <a href="GridLayout.html#wrappingWidth">wrappingWidth</a>,
							which will be used instead of the diagram&#39;s viewport width, to control when each row is considered &quot;full&quot;.
							The value of <a href="Layout.html#isViewportSized">Layout.isViewportSized</a> will be true when
							the value of <a href="GridLayout.html#wrappingWidth">wrappingWidth</a> is <code>NaN</code>.
						This causes the layout to be performed again automatically as the viewport changes size.</p>
						<p>You can also set <a href="GridLayout.html#wrappingColumn">wrappingColumn</a> to limit the number of items in each row.
						Both the <a href="GridLayout.html#wrappingWidth">wrappingWidth</a> and the <a href="GridLayout.html#wrappingColumn">wrappingColumn</a> are respected when deciding when to wrap to the next row.</p>
						<p>This layout is sufficiently simple that it does not use a <a href="LayoutNetwork.html">LayoutNetwork</a>.</p>
				</div>
			</section>
			<section class="tsd-panel-group tsd-index-group">
				<h2>Index</h2>
				<section class="tsd-panel tsd-index-panel">
					<div class="tsd-index-content">
						<section class="tsd-index-section ">
							<h3>Constructors</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a href="GridLayout.html#constructor" class="tsd-kind-icon">constructor</a></li>
							</ul>
						</section>
						<section class="tsd-index-section ">
							<h3>Properties</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#alignment" class="tsd-kind-icon">alignment</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#arrangement" class="tsd-kind-icon">arrangement</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#cellSize" class="tsd-kind-icon">cell<wbr>Size</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#comparer" class="tsd-kind-icon">comparer</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#sorting" class="tsd-kind-icon">sorting</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#spacing" class="tsd-kind-icon">spacing</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#wrappingColumn" class="tsd-kind-icon">wrapping<wbr>Column</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#wrappingWidth" class="tsd-kind-icon">wrapping<wbr>Width</a></li>
							</ul>
						</section>
						<section class="tsd-index-section ">
							<h3>Methods</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="GridLayout.html#doLayout" class="tsd-kind-icon">do<wbr>Layout</a></li>
							</ul>
						</section>
						<section class="tsd-index-section ">
							<h3>Constants</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Ascending" class="tsd-kind-icon">Ascending</a></li>
								<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Descending" class="tsd-kind-icon">Descending</a></li>
								<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Forward" class="tsd-kind-icon">Forward</a></li>
								<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-LeftToRight" class="tsd-kind-icon">Left<wbr>ToRight</a></li>
								<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Location" class="tsd-kind-icon">Location</a></li>
								<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Position" class="tsd-kind-icon">Position</a></li>
								<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Reverse" class="tsd-kind-icon">Reverse</a></li>
								<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-RightToLeft" class="tsd-kind-icon">Right<wbr>ToLeft</a></li>
							</ul>
						</section>
					</div>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Constructors</h2>
				<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite">
					<a name="constructor" class="tsd-anchor"></a>
					<h3>
						constructor
					</h3>
					<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite">
						<li class="tsd-signature tsd-kind-icon">new <wbr>Grid<wbr>Layout<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="GridLayout.html" class="tsd-signature-type" data-tsd-kind="Class">GridLayout</a></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<h4 class="tsd-returns-title">Returns <a href="GridLayout.html" class="tsd-signature-type" data-tsd-kind="Class">GridLayout</a></h4>
						</li>
					</ul>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Properties</h2>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="alignment" class="tsd-anchor"></a>
					<h3>
						alignment
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets whether the <a href="Part.html#location">Part.location</a> or the position should be used
								to arrange each part.</p>
								<p>The default value is <a href="GridLayout.html#static-Location">GridLayout.Location</a> -- the <a href="Part.html#location">Part.location</a>s will
								be aligned in a grid.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="arrangement" class="tsd-anchor"></a>
					<h3>
						arrangement
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets how to arrange the parts.
								Must be <a href="GridLayout.html#static-LeftToRight">GridLayout.LeftToRight</a> or <a href="GridLayout.html#static-RightToLeft">GridLayout.RightToLeft</a>.</p>
								<p>The default value is <a href="GridLayout.html#static-LeftToRight">GridLayout.LeftToRight</a>.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="cellSize" class="tsd-anchor"></a>
					<h3>
						cell<wbr>Size
					<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type" data-tsd-kind="Class">Size</a>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the minimum part size by which each part is positioned in the grid.</p>
								<p>The default value is NaN x NaN.
								The units are in document coordinates.</p>
								<p>When the cell size is smaller than a part, the part will occupy more than one cell.
									This allows parts to be positioned closer to each other, but then variations in part
								sizes may cause them not to be aligned in perfect rows or columns.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="comparer" class="tsd-anchor"></a>
					<h3>
						comparer
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a>, b<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the comparison function used to sort the parts.</p>
								<p>The default value is a case-insensitive alphabetic comparison
								using the <a href="Part.html#text">Part.text</a> property of each part.</p>
								<pre><code class="language-js"><span style="color: #D4D4D4">  </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">GridLayout</span><span style="color: #D4D4D4">,</span>
<span style="color: #D4D4D4">    {</span>
<span style="color: #D4D4D4">      </span><span style="color: #9CDCFE">sorting:</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">GridLayout</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Ascending</span><span style="color: #D4D4D4">,</span>
<span style="color: #D4D4D4">      </span><span style="color: #DCDCAA">comparer</span><span style="color: #9CDCFE">:</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">function</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">pa</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">pb</span><span style="color: #D4D4D4">) {</span>
<span style="color: #D4D4D4">        </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">da</span><span style="color: #D4D4D4"> = </span><span style="color: #9CDCFE">pa</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">data</span><span style="color: #D4D4D4">;</span>
<span style="color: #D4D4D4">        </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">db</span><span style="color: #D4D4D4"> = </span><span style="color: #9CDCFE">pb</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">data</span><span style="color: #D4D4D4">;</span>
<span style="color: #D4D4D4">        </span><span style="color: #C586C0">if</span><span style="color: #D4D4D4"> (</span><span style="color: #9CDCFE">da</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">someProperty</span><span style="color: #D4D4D4"> &lt; </span><span style="color: #9CDCFE">db</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">someProperty</span><span style="color: #D4D4D4">) </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> -</span><span style="color: #B5CEA8">1</span><span style="color: #D4D4D4">;</span>
<span style="color: #D4D4D4">        </span><span style="color: #C586C0">if</span><span style="color: #D4D4D4"> (</span><span style="color: #9CDCFE">da</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">someProperty</span><span style="color: #D4D4D4"> &gt; </span><span style="color: #9CDCFE">db</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">someProperty</span><span style="color: #D4D4D4">) </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">1</span><span style="color: #D4D4D4">;</span>
<span style="color: #D4D4D4">        </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">0</span><span style="color: #D4D4D4">;</span>
<span style="color: #D4D4D4">      }</span>
<span style="color: #D4D4D4">    }</span>
<span style="color: #D4D4D4">  )</span>
</code></pre>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="sorting" class="tsd-anchor"></a>
					<h3>
						sorting
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets what order to place the parts.
									Must be <a href="GridLayout.html#static-Forward">GridLayout.Forward</a>, <a href="GridLayout.html#static-Reverse">GridLayout.Reverse</a>,
								<a href="GridLayout.html#static-Ascending">GridLayout.Ascending</a>, or <a href="GridLayout.html#static-Descending">GridLayout.Descending</a>.</p>
								<p>The default value is <a href="GridLayout.html#static-Ascending">GridLayout.Ascending</a>.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="spacing" class="tsd-anchor"></a>
					<h3>
						spacing
					<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type" data-tsd-kind="Class">Size</a>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the minimum horizontal and vertical space between parts.</p>
								<p>The default value is 10 x 10.
								The units are in document coordinates.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="wrappingColumn" class="tsd-anchor"></a>
					<h3>
						wrapping<wbr>Column
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the maximum number of columns.</p>
								<p>The default is NaN, meaning not to limit the number of columns.
								1 is a common value to produce a single column of parts.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="wrappingWidth" class="tsd-anchor"></a>
					<h3>
						wrapping<wbr>Width
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the wrapping width.</p>
								<p>The default is NaN, meaning to use the width of the diagram&#39;s panel&#39;s viewport.
								Must be a value greater than 0.</p>
							</div>
						</li>
					</ul>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Methods</h2>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-overwrite">
					<a name="doLayout" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagOverride">Override</span>
						do<wbr>Layout
					</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-overwrite">
						<li class="tsd-signature tsd-kind-icon">do<wbr>Layout<span class="tsd-signature-symbol">(</span>coll<span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="Iterable.html" class="tsd-signature-type" data-tsd-kind="Interface">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><a href="Group.html" class="tsd-signature-type" data-tsd-kind="Class">Group</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Assign the positions of the parts, ignoring any links.</p>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>coll: <a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="Iterable.html" class="tsd-signature-type" data-tsd-kind="Interface">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><a href="Group.html" class="tsd-signature-type" data-tsd-kind="Class">Group</a></h5>
									<div class="tsd-comment tsd-typography">
										<p>A <a href="Diagram.html">Diagram</a> or a <a href="Group.html">Group</a> or a collection of <a href="Part.html">Part</a>s.</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
						</li>
					</ul>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Constants</h2>
				<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
					<a name="static-Ascending" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagStatic">Static</span>
						Ascending
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span>        </h3>
					<div class="tsd-comment tsd-typography">
						<p>Lay out each child according to the sort order given by <a href="GridLayout.html#comparer">GridLayout.comparer</a>
						This value is used for <a href="GridLayout.html#sorting">GridLayout.sorting</a>.</p>
					</div>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
					<a name="static-Descending" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagStatic">Static</span>
						Descending
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span>        </h3>
					<div class="tsd-comment tsd-typography">
						<p>Lay out each child in reverse sort order given by <a href="GridLayout.html#comparer">GridLayout.comparer</a>
						This value is used for <a href="GridLayout.html#sorting">GridLayout.sorting</a>.</p>
					</div>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
					<a name="static-Forward" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagStatic">Static</span>
						Forward
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span>        </h3>
					<div class="tsd-comment tsd-typography">
						<p>Lay out each child in the order in which they were found;
						This value is used for <a href="GridLayout.html#sorting">GridLayout.sorting</a>.</p>
					</div>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
					<a name="static-LeftToRight" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagStatic">Static</span>
						Left<wbr>ToRight
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span>        </h3>
					<div class="tsd-comment tsd-typography">
						<p>Fill each row from left to right;
						This value is used for <a href="GridLayout.html#arrangement">GridLayout.arrangement</a>.</p>
					</div>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
					<a name="static-Location" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagStatic">Static</span>
						Location
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span>        </h3>
					<div class="tsd-comment tsd-typography">
						<p>Position the part&#39;s <a href="Part.html#location">Part.location</a> at a grid point;
						This value is used for <a href="GridLayout.html#alignment">GridLayout.alignment</a>.</p>
					</div>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
					<a name="static-Position" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagStatic">Static</span>
						Position
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span>        </h3>
					<div class="tsd-comment tsd-typography">
						<p>Position the top-left corner of each part at a grid point;
						This value is used for <a href="GridLayout.html#alignment">GridLayout.alignment</a>.</p>
					</div>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
					<a name="static-Reverse" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagStatic">Static</span>
						Reverse
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span>        </h3>
					<div class="tsd-comment tsd-typography">
						<p>Lay out each child in reverse order from which they were found;
						This value is used for <a href="GridLayout.html#sorting">GridLayout.sorting</a>.</p>
					</div>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
					<a name="static-RightToLeft" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagStatic">Static</span>
						Right<wbr>ToLeft
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span>        </h3>
					<div class="tsd-comment tsd-typography">
						<p>Fill each row from right to left;
						This value is used for <a href="GridLayout.html#arrangement">GridLayout.arrangement</a>.</p>
					</div>
				</section>
			</section>
		</div>
		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
			<nav class="tsd-navigation primary">
				<ul>
					<li class=" ">
						<a href="../index.html">GoJS <wbr>Class <wbr>Index</a>
					</li>
				</ul>
			</nav>
			<nav class="tsd-navigation secondary menu-sticky">
				<ul class="before-current">
				</ul>
				<ul class="current">
					<li class="current tsd-kind-class">
						<a href="GridLayout.html" class="tsd-kind-icon">Grid<wbr>Layout</a>
						<ul>
							<li class=" tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite">
								<a href="GridLayout.html#constructor" class="tsd-kind-icon">constructor</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="GridLayout.html#alignment" class="tsd-kind-icon">alignment</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="GridLayout.html#arrangement" class="tsd-kind-icon">arrangement</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="GridLayout.html#cellSize" class="tsd-kind-icon">cell<wbr>Size</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="GridLayout.html#comparer" class="tsd-kind-icon">comparer</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="GridLayout.html#sorting" class="tsd-kind-icon">sorting</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="GridLayout.html#spacing" class="tsd-kind-icon">spacing</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="GridLayout.html#wrappingColumn" class="tsd-kind-icon">wrapping<wbr>Column</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="GridLayout.html#wrappingWidth" class="tsd-kind-icon">wrapping<wbr>Width</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-overwrite">
								<a href="GridLayout.html#doLayout" class="tsd-kind-icon">do<wbr>Layout</a>
							</li>
							<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
								<a href="GridLayout.html#static-Ascending" class="tsd-kind-icon">Ascending</a>
							</li>
							<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
								<a href="GridLayout.html#static-Descending" class="tsd-kind-icon">Descending</a>
							</li>
							<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
								<a href="GridLayout.html#static-Forward" class="tsd-kind-icon">Forward</a>
							</li>
							<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
								<a href="GridLayout.html#static-LeftToRight" class="tsd-kind-icon">Left<wbr>ToRight</a>
							</li>
							<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
								<a href="GridLayout.html#static-Location" class="tsd-kind-icon">Location</a>
							</li>
							<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
								<a href="GridLayout.html#static-Position" class="tsd-kind-icon">Position</a>
							</li>
							<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
								<a href="GridLayout.html#static-Reverse" class="tsd-kind-icon">Reverse</a>
							</li>
							<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
								<a href="GridLayout.html#static-RightToLeft" class="tsd-kind-icon">Right<wbr>ToLeft</a>
							</li>
						</ul>
					</li>
				</ul>
				<ul class="after-current">
				</ul>
			</nav>
		</div>
	</div>
</div>
<div class="tsd w-full max-w-screen-xl mx-auto px-2">
	<div class="bottom-copyright">Copyright &copy; 1998-2021 by Northwoods Software Corporation.</div>
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date()); gtag('config', 'UA-1506307-5');
  var getOutboundLink = function(url, label) {
    gtag('event', 'click', {
      'event_category': 'outbound',
      'event_label': label,
      'transport_type': 'beacon'
    });
  }

  // topnav
  var topButton = document.getElementById("topnavButton");
  var topnavList = document.getElementById("topnavList");
  topButton.addEventListener("click", function() {
    this.classList.toggle("active");
    topnavList.classList.toggle("hidden");
    document.getElementById("topnavOpen").classList.toggle("hidden");
    document.getElementById("topnavClosed").classList.toggle("hidden");
  });
</script>
</body>
</html>